<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导入库文件 -->
    <script src="js/vue_2.5.22.js"></script>
    <script src="js/vue-router_3.0.2.js"></script>
</head>

<body>
    <div id="app">
        <router-link to='/user'>User</router-link>
        <router-link to='register'>Register</router-link>
        <!-- 路由填充位 -->
        <!-- 将来通过路由匹配到的组件，，将会渲染到router-view所在的位置 -->
        <router-view></router-view>
    </div>

</body>
<script>
    // 自定义路由组件
    var User = {
        template: '<h1>我是User</h1>'
    }
    var Register = {
            template: `<h1 @click='handler'>我是Register</h1>`,
            methods: {
                handler: function() {
                    this.router.push('/user')
                }
            },
        }
        // 匹配路由规则并创建路由
    var router = new VueRouter({
        // 路由规则数组
        routes: [{
            // 路由重定向
            path: '/',
            redirect: '/user'
        }, {
            path: '/user',
            component: User
        }, {
            path: '/register',
            component: Register
        }]

    })
    var vm = new Vue({
        el: '#app',
        data: {},
        router
    })
</script>

</html>